<template>
    <div class="header-detail">
        <div class="cover">
            <img class="cover-bg" :src="data.cover" alt="">
            <!-- <img class="play-icon" src="@/assets/images/play-icon.png" alt=""> -->
        </div>
        <div class="mooc-info">
            <span class="mooc-title">{{data.title}}</span>
            <span class="mooc-tag">{{covertCate(data.classifyList)}}</span>
            <p class="other">
                <span class="rate">
                    <van-rate
                        v-model="data.score"
                        :size="16"
                        color="#ffd21e"
                        void-icon="star"
                        void-color="#eee"
                        readonly 
                        allow-half
                    />
                    <span class="num">{{data.score || 0}}</span>
                </span>
                <span>
                    <span class="sign-up">{{data.buyUserCount}}人报名</span>
                    <span class="class">{{data.classHour || 0}}课时</span>
                </span>
            </p>
        </div>
    </div>
</template>

<script setup>
import { defineComponent, toRefs,ref, reactive, toRef, computed, onMounted } from "vue"

const props = defineProps({
    data: {
        default: () => {},
        type: Object
    }
});

const info = reactive({
})

function covertCate(cate = []){
    let arr = []
    const loop = (temp) => {
        temp.forEach(item => {
            if(item.children && item.children.length){
                loop(item.children)
            }
            arr.push(item.name)
        })
    }
    loop(cate)
    return arr.length && arr.reverse().join('/') || ''
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .header-detail{
        width:100%;
        background-color: #fff;
        .cover{
            position: relative;
            height: 210px;
            &::before{
                content:'';
                width:100%;
                height:100%;
                position: absolute;
                top:0;
                left:0;
                background: rgba(0,0,0,0.35);
            }
            .cover-bg{
                width:100%;
                height:100%;
            }
            .play-icon{
                position: absolute;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);
                width:40px;
                height:40px;
            }
        }
        .mooc-info{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 20px 15px;
            box-sizing: border-box;
            .mooc-title{
                font-size: 18px;
                font-weight: 600;
                color: #171A1D;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
                overflow: hidden;
            }
            .mooc-tag{
                font-size: 12px;
                font-weight: 400;
                color: #0084F6;
                background-color: #E0F1FF ;
                padding: 2px 4px;
                box-sizing: border-box;
                margin: 12px 0 15px 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                word-break: break-all;
                overflow: hidden;
                border-radius: 2px;
            }
            .other{
                width:100%;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                .num{
                    font-size: 14px;
                    font-weight: 600;
                    color: #171A1D;
                    margin-left: 6px;
                }
                .sign-up{
                    font-size: 13px;
                    font-weight: 400;
                    color: #A2A3A4;
                    margin-right: 10px;
                }
                .class{
                    background: #FCF9F4;
                    border-radius: 2px;
                    border: 1px solid #F0D7BC;
                    font-size: 12px;
                    font-weight: 400;
                    color: #CE873A;
                    line-height: 18px;
                    padding: 2px 4px;
                    box-sizing: border-box;
                }
            }
        }
    }
 
</style>
